<template slot-scope="scope">
  <div>
    <el-checkbox :indeterminate="isIndeterminatePartss" v-model="checkAllPartss" @change="handlePartssCheckAllChange">配件</el-checkbox>
    <div style="margin:0px 0px 0px 20px;width:20px;">
      <el-checkbox-group v-model="checkedPartPartList" @change="handleCheckedCitiesChangePartss">
        <el-checkbox v-for="parts in sitesPartPart" :label="parts.codeId" :key="parts.codeId" :value="parts.codeId">
          {{parts.codeCnDesc}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
  import {
    getAccessories
  } from '@/api/common/auth/roleManage'

  export default {
    name: "part",
    props:['userPermissionData'],
    data() {
      return {
        checkedPartPartList: [],
        loading: false,
        checkAllPartss: false,
        sitesPartPart: [],
        isIndeterminatePartss: false,
        roleId: '',
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      async loadData() {
        this.loading = true;
        const getAccessoriesRes = await getAccessories(1313);
        this.loading = false
        if(getAccessoriesRes.resultCode === 200&&getAccessoriesRes.data&&getAccessoriesRes.data.length>0) {
          this.sitesPartPart = _.cloneDeep(getAccessoriesRes.data);
        }

        console.log(this.userPermissionData,"配置")
        if(this.userPermissionData.accessories){
          let checkList = this.userPermissionData.accessories.split(",")
          checkList.forEach(x=>{
            this.checkedPartPartList.push(Number(x))
          })
          if(this.checkedPartPartList.length == this.sitesPartPart.length){
            this.checkAllPartss=true
          }
        }
      },
      handlePartssCheckAllChange(val) {
        const checkedPartPartList = [];
        if (val) {
          for (var i = 0; i < this.sitesPartPart.length; i++) {
            checkedPartPartList.push(this.sitesPartPart[i].codeId);
          }
        }
        this.checkedPartPartList = checkedPartPartList;
        this.isIndeterminatePartss = false;
      },
      handleCheckedCitiesChangePartss(value) {
        let checkedCount = value.length;
        this.checkAllPartss = checkedCount === this.sitesPartPart.length;
        this.isIndeterminatePartss = checkedCount > 0 && checkedCount < this.sitesPartPart.length;
      },
      getData() {
        return [...this.checkedPartPartList]
      }
    }
  }

</script>

<style scoped>
  .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }

  .el-checkbox {
    margin-right: 25px;
  }

</style>
